<!--
  门卫侧边栏导航组件
  创建时间：2025-09-11
  作者：开发团队
  目的：门卫专用功能导航菜单
-->

<template>
  <div class="guard-sidebar">
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      @select="handleMenuSelect"
      :collapse="false"
      :unique-opened="true"
    >
      <el-menu-item index="scanner">
        <el-icon><Camera /></el-icon>
        <template #title>扫码核验</template>
      </el-menu-item>
      
      <el-menu-item index="records">
        <el-icon><Clock /></el-icon>
        <template #title>今日记录</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Camera, Clock } from '@element-plus/icons-vue'

// Props定义
interface GuardSidebarProps {
  activeMenu: string
}

defineProps<GuardSidebarProps>()

// Emits定义
interface GuardSidebarEmits {
  (e: 'menu-select', index: string): void
}

const emit = defineEmits<GuardSidebarEmits>()

/**
 * 处理菜单选择
 * :param index: 菜单项索引
 */
const handleMenuSelect = (index: string): void => {
  emit('menu-select', index)
}
</script>

<style scoped>
.guard-sidebar {
  height: 100%;
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.sidebar-menu .el-menu-item:hover {
  background-color: var(--el-fill-color-light);
}
</style>"